<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<style>
		.login{
			width: 200px;
			margin: 200px auto;
		}
	</style>
	<body>
		<div id="app">
			<div class="login" v-if="!isLogin">
				<h1>用户登录</h1>
				<div>
					用户名：<input type="text" v-model="username"/>
				</div>
				<div>
					密码：<input type="text" v-model="userpwd"/>
				</div>
				<div>
					<button @click="login">登录</button>
				</div>
			</div>
			<div class="login" v-else>
				{{username}}已登录 <br />
				<button @click="loginOut">登出</button>
			</div>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						username: '',
						userpwd: '',
						isLogin: false
					}
				},
				methods:{
					login:function(){
						if(this.username == "admin" && this.userpwd == "123456"){
							this.isLogin = true
							alert("登录成功！")
						}else{
							this.isLogin = false
							alert("用户名或密码错误！")
						}
					},
					loginOut:function(){
						this.isLogin = false
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
